<template>
    <div>
        <!-- 头部导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>扩展</el-breadcrumb-item>
      <el-breadcrumb-item>轮播图列表</el-breadcrumb-item>
    </el-breadcrumb>
        <el-table :data="options" style="width: 100%" stripe>
            <el-table-column prop="showorder" label="显示顺序" width="180">
            </el-table-column>
            <el-table-column label="状态">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.isshow" type="success">显示</el-tag>
                    <el-tag v-else type="danger">不显示</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="缩略图">
                <template slot-scope="scope">
                    <div style="width:180px;height:90px">
                        <img
                            :src="scope.row.localsrc"
                            alt=""
                            style="width:180px;height:90px"
                        />
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="linkto" label="超链接地址">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                        size="mini"
                        @click="handleEdit(scope.$index, scope.row)"
                        >编辑</el-button
                    >
                    <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope.$index, scope.row)"
                        >删除</el-button
                    >
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
import axios from "axios";
export default {
    data() {
        return {
            options: []
        };
    },
    computed: {},
    methods: {
        handleEdit(index, row) {
            // console.log(index, row);
            this.$router.push(`/carouselEdit/${row._id}`);
        },
        handleDelete(index, row) {
            axios
                .delete("/files", {
                    data: { localsrc: row.localsrc }
                })
                .then(res => {
                    if (res.data) {
                        axios
                            .delete("/carousel", {
                                data: { _id: row._id }
                            })
                            .then(res => {
                                if (res.data) {
                                    this.$message({
                                        message: "删除成功",
                                        type: "success"
                                    });
                                    this.getall();
                                } else {
                                    this.$message.error("删除失败");
                                }
                            });
                    }
                });
        },
        getall: function() {
            axios.get("/carousel").then(res => {
                if (res.data) {
                    this.options = res.data;
                }
            });
        }
    },
    mounted() {
        this.getall();
    }
};
</script>

<style></style>
